{% extends 'sys_manage.html' %}
{% block customcss %}
    {{ block.super }}
    <style>
        .demoTable {
            padding: 0 25%
        }

        .layui-input {
            width: 400px
        }

        .status-this {
            border: 1px solid #2F4056;
            border-radius: 4px;
            background-color: #2F4056;
            color: #fff !important;
        }
    </style>
{% endblock %}
{% block title %}
    <title>{{ title }}</title>
{% endblock %}
{#    <div class="layui-btn-container userTable">#}
{#        <button class="layui-btn" data-type="getCheckData">获取选中行数据</button>#}
{#        <button class="layui-btn" data-type="getCheckLength">获取选中数目</button>#}
{#        <button class="layui-btn" data-type="isAll">验证是否全选</button>#}
{#        <button style="float: right" data-method="offset" id="add_user" data-type="auto"#}
{#                class="layui-btn layui-btn-normal">新增用户#}
{#        </button>#}
{#    </div>#}

{% block table %}
    <div>
        <span>状态：</span>
        <span class="layui-breadcrumb" lay-separator="|">
              <a href="#" class="status-this" values="0" onclick="filter_resource_type(this);">全部</a>
              <a href="#" values="1" onclick="filter_resource_type(this);">公开</a>
              <a href="#" values="2" onclick="filter_resource_type(this);">授权</a>
            </span>
    </div>
    <div class="demoTable">
        <div class="layui-inline">
            <input class="layui-input" name="search" id="search" autocomplete="off" placeholder="请输入api或用户ip">
        </div>
        <button class="layui-btn" data-type="reload" id="search_btn">搜索</button>
    </div>
    {#            <div class="layui-breadcrumb" style="margin-top: 11px"></div>#}

    <table class="layui-table" lay-data="{url:'/user/useapiinfo/', page:true,limit:10, id:'useapi_table'}"
           lay-filter="user">
        <thead>
        <tr>
            {#            <th lay-data="{type:'checkbox', fixed: 'left'}"></th>#}
            <th lay-data="{field:'id', width:70, sort: true, fixed: true}">序号</th>
            <th lay-data="{field:'username', width:120}">用户名</th>
            <th lay-data="{field:'createname', width:120}">创建者</th>
            <th lay-data="{field:'api', width:320}">资源api</th>
            <th lay-data="{field:'user_ip', width:140}">用户ip</th>
            <th lay-data="{field:'usetime', width:170, sort: true}">使用时间</th>
        </tr>
        </thead>
    </table>
{% endblock table %}

{% block customjs %}
    {{ block.super }}
    <script>
        $(function () {
            $('#use_api').addClass('layui-this');
        });
        layui.use(['table', 'form'], function () {
            var table = layui.table;
            var layer = layui.layer;
            var active = {
                // 点击搜索按钮表格重载
                reload: function () {
                    var search = $('#search');
                    //执行重载
                    table.reload('useapi_table', {
                        page: {
                            curr: 1 //重新从第 1 页开始
                        }
                        , where: {
                            search_info: search.val()
                        }
                    });
                }
            };
            // 点击搜索按钮事件
            $('#search_btn').on('click', function () {
                var type = $(this).data('type');
                active[type] ? active[type].call(this) : '';
            });
            //监听表格复选框选择
            {#            table.on('checkbox(user)', function (obj) {#}
            {#                console.log(obj)#}
            {#            });#}
        })
        ;
        function filter_resource_type(em) {
            layui.use(['form', 'table'], function () {
                var table = layui.table;
                var active = {
                    status: function () {
                        var resource_status = $(em).attr('values');
                        table.reload('useapi_table', {
                            page: {
                                curr: 1 //重新从第 1 页开始
                            }
                            , where: {
                                resource_status: resource_status
                            }
                        });
                    }

                };
                var type = "status";
                active[type] ? active[type].call(this) : '';
                $(em).siblings().removeClass("status-this");
                $(em).addClass("status-this");

            });
        }
    </script>
{% endblock %}


